<div>
    <!-- Title -->
    <mat-icon class="Search">search</mat-icon>搜尋

    <!-- Filter id Column -->
    <mat-form-field class="MenuNum">
        <input matInput [formControl]="idFilter" placeholder="Filter Id" [matAutocomplete]="autoIdFilter">
        <mat-autocomplete #autoIdFilter="matAutocomplete">
            <mat-option *ngFor="let option of idFilteredOptions | async" [value]="option">
                {{option}}
            </mat-option>
        </mat-autocomplete>
        <mat-label>
            <mat-icon class="Search">search</mat-icon>ID
        </mat-label>
    </mat-form-field>&nbsp;

    <!-- Filte name Column -->
    <mat-form-field>
        <input matInput [formControl]="nameFilter" placeholder="Filter 名稱" [matAutocomplete]="autoNameFilter">
        <mat-autocomplete #autoNameFilter="matAutocomplete">
            <mat-option *ngFor="let option of nameFilteredOptions | async" [value]="option">
                {{option}}
            </mat-option>
        </mat-autocomplete>
        <mat-label>
            <mat-icon class="Search">search</mat-icon>名稱
        </mat-label>
    </mat-form-field>&nbsp;

    <!-- Filter method Column -->
    <mat-form-field>
        <input matInput [formControl]="methodFilter" placeholder="Filter 方法" [matAutocomplete]="autoMethodFilter">
        <mat-autocomplete #autoMethodFilter="matAutocomplete">
            <mat-option *ngFor="let option of methodFilteredOptions | async" [value]="option">
                {{option}}
            </mat-option>
        </mat-autocomplete>
        <mat-label>
            <mat-icon class="Search">search</mat-icon>方法
        </mat-label>
    </mat-form-field>&nbsp;

    <!-- Filter controllerId Column -->
    <mat-form-field class="MenuNum">
        <input matInput [formControl]="controllerIdFilter" placeholder="Filter 控制器" [matAutocomplete]="autoComponentFilter">
        <mat-autocomplete #autoComponentFilter="matAutocomplete">
            <mat-option *ngFor="let option of controllerIdFilteredOptions | async" [value]="option">
                {{option}}
            </mat-option>
        </mat-autocomplete>
        <mat-label>
            <mat-icon class="Search">search</mat-icon>控制器
        </mat-label>
    </mat-form-field>&nbsp;

    <!-- Filter description Column -->
    <mat-form-field>
        <input matInput [formControl]="descriptionFilter" placeholder="Filter 描述" [matAutocomplete]="autoDescriptionFilter">
        <mat-autocomplete #autoDescriptionFilter="matAutocomplete">
            <mat-option *ngFor="let option of descriptionFilteredOptions | async" [value]="option">
                {{option}}
            </mat-option>
        </mat-autocomplete>
        <mat-label>
            <mat-icon class="Search">search</mat-icon>描述
        </mat-label>
    </mat-form-field>
</div>

<table mat-table [dataSource]="actionDataSource" matSort>

    <!-- Note that these columns can be defined in any order.
         The actual rendered columns are set as a property on the row definition" -->

    <!-- id Column -->
    <ng-container matColumnDef="actionId">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Action Id </th>
        <td mat-cell *matCellDef="let element"> {{element.actionId}} </td>
    </ng-container>

    <!-- name Column -->
    <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> 名稱 </th>
        <td mat-cell *matCellDef="let element"> {{element.name}} </td>
    </ng-container>

    <!-- method Column -->
    <ng-container matColumnDef="method">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> 方法 </th>
        <td mat-cell *matCellDef="let element"> {{element.method}} </td>
    </ng-container>

    <!-- controllerId Column -->
    <ng-container matColumnDef="controllerId">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> 控制器 </th>
        <td mat-cell *matCellDef="let element"> {{element.controllerId}} </td>
    </ng-container>

    <!-- description Column -->
    <ng-container matColumnDef="description">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> 描述 </th>
        <td mat-cell *matCellDef="let element"> {{element.description}} </td>
    </ng-container>

    <!-- actions -->
    <ng-container matColumnDef="actions">
        <th mat-header-cell *matHeaderCellDef class="actions">
            <button mat-icon-button class="TableButton" (click)="openCreateDialog()">
                <mat-icon>add</mat-icon>
            </button>&nbsp;
            <button mat-icon-button class="TableButton" (click)="loadData()">
                <mat-icon>refresh</mat-icon>
            </button>
        </th>
        <td mat-cell *matCellDef="let row; let i=index;" class="actions">
            <button mat-icon-button class="TableButton" (click)="openUpdateDialog(row)">
                <mat-icon>edit</mat-icon>
            </button>&nbsp;
            <button mat-icon-button class="TableButton" (click)="openDeleteDialog(row)">
                <mat-icon>delete_forever</mat-icon>
            </button>
        </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="actionDisplayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: actionDisplayedColumns;"></tr>
</table>

<div class="no-results" [style.display]="paginator.length == 0 ? '' : 'none'">
    No results
</div>